import React, {
  createContext,
  useState,
  useEffect,
  SelectHTMLAttributes,
  CSSProperties,
} from 'react';
import classnames from 'classnames';

// 定义可选项的数据结构
interface SelectOptionDataSourceObject {
  value: string;
}

// 通过泛型使组件能够处理更多结构的数据类型来展示列表
export type SelectOptionDataSourceType<T = {}> = SelectOptionDataSourceObject &
  T;

type SelectSize = 'large' | 'small' | 'default';

export interface SelectInterface
  extends Omit<
    Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'>,
    'onSelect'
  > {
  // 选择框大小
  size?: SelectSize;

  // 是否禁用选择框
  disabled?: boolean;

  // 是否可以清空
  clearable?: boolean;

  style?: CSSProperties;

  // 是否可以搜索
  showSearch?: boolean;

  // 是否根据输入项进行筛选。当其为一个函数时，会接收 inputValue option 两个参数，
  // 当 option 符合筛选条件时，应返回 true，反之则返回 false
  filterOption: (
    keyword: string
  ) =>
    | Array<SelectOptionDataSourceType>
    | Promise<Array<SelectOptionDataSourceType>>;

  // 选中项目的回调
  onSelect?: (
    value: any,
    item: SelectOptionDataSourceType,
    event: React.SyntheticEvent<any>
  ) => void;

  // 自定义下拉框内容
  dropdownRender?: (item: SelectOptionDataSourceType) => React.ReactElement;

  onDropdownVisibleChange?: Function;
}
